<template>
	<view class="page">
		<view class="topline">
			<view >
				时间
			</view>
			<view >
				当月收支汇总
			</view>
			
		</view>
	  <view class="title" v-if="list.lenght==0">
	  	暂无数据
	  </view>
		<view class="line"  v-for="(item,index) in list" :key="index">
			<view class="left">
				<view class="name">
					{{item.month}}汇总
				</view>
				<view class="time">
					结算周期：{{item.period}}
				</view>
			</view>
			<view class="right">
			
			    <view class="price" v-if="item.status=='已结算'">
			    	{{item.amount}}
			    </view>
				<view class="danwei" v-if="item.status=='已结算'">
					元
				</view>
				<view class="weijiesuan" v-else>
					{{item.status}}
				</view>
				<!-- <view class="iconfont icon-xiangyou1">
					
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {monthBill} from '../../utils/api.js'
	export default {
		data() {
			return {
				list:[]
			}
		},
		onShow() {
			let p={
				phone:uni.getStorageSync('phone')
			}
			monthBill(p).then(res=>{
				console.log(res)
				this.list=res.data.data.reverse()
			})
		},
		methods: {
			monthdetail(){
				uni.navigateTo({
					url:'/pagesA/monthzhangdan/monthzhangdan'
				})
			},
		}
	}
</script>

<style lang="less" scoped>
   .page{
	   width: 750rpx;
	   box-sizing: border-box;
	   padding: 30rpx 0;
	   .topline{
		   width: 100%;
		    display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 0 20rpx;
			color: gray;
			font-size: 30rpx;
			font-weight: bold;
		   
	   }
	   .title{
		   text-align: center;
		   margin-top: 50rpx;
		   color: gray;
		   font-size: 30rpx;
	   }
	   .line{
		   width: 100%;
		   background-color: white;
		  
		   box-sizing: border-box;
		   padding: 20rpx 40rpx;
		   display: flex;
		   align-items: center;
		   justify-content: space-between;
		   border-bottom: 1rpx solid #d1d1d1;
		   
		   .left{
			   width: 50%;
			   .name{
				   font-size: 30rpx;
				   font-weight: bold;
			   }
			   .time{
				   font-size: 26rpx;
				   color: darkgray;
			   }
		   }
		   .right{
			   width: 50%;
			   display: flex;
			   align-items: center;
			   justify-content: flex-end;
			   .price{
				   color: green;
			   }
			   .danwei{
				   font-size: 28rpx;
				   font-weight: bold;
			   }
			   .weijiesuan{
				   font-size: 28rpx;
				   font-weight: bold;
			   }
			   .iconfont{
				   color: gray;
			   }
		   }
	   }
   }
</style>
